Como ficou definido no documento 4, os elementos html podem ser divididos nas seguintes classes :
1-ELEMENTOS BÁSICOS: <body>
2-ELEMENTOS DE METADADOS: <base><head><link><meta><style>
3-ELEMENTOS DE SEÇÕES DE CONTEÚDO: <address><article><aside> <footer>
<header><h1> a <h6><hgroup><nav>
4-ELEMENTOS DE CONTEÚDOS EM TEXTO: <dd><dl><dt><div><figure>
<figcaption><hr><li><main><ol><p><pre><ul>
5-ELEMENTOS DE TEXTO EM LINHA: <a><abbr><b><br><cite><code>
<data><dfn><em><i><kbd><mark><q><s><samp>
<small><span><strong><sub><sup><time><u><var>
6-ELEMENTOS DE IMAGEM E MULTIMÍDIA: <img><area><audio><map><track><video>
7-ELEMENTOS DE CONTEÚDOS EMBARCADOS :<embed><object><param><source>
8-ELEMENTOS DE SCRIPT: <canvas><noscript><script>
9-ELEMENTOS DE MARCAÇÃO DE EDIÇÃO: <del> <ins>
10-ELEMENTOS DE CONTEÚDOS EM TABELA: <caption><col><colgroup><table>
<tbody><td><tfoot><th><thead><tr>
11-ELEMENTOS DE FORMULÁRIO: <button><datalist><fieldset><form><input>
<label><legend><meter><optgroup><option><output><progress>
<select><textarea>
12-ELEMENTOS INTERATIVOS: <details><menu><menuitem><summary>
Neste documento discutiremos a classe 5 - 5-ELEMENTOS DE TEXTO EM LINHA.
Note bem que em 4-ELEMENTOS DE CONTEÚDOS EM TEXTO temos tags de texto que são exibidas em blocos e
em 5-ELEMENTOS DE TEXTO EM LINHA temos tags de texto que são exibidas em linha.
Neste documento discutiremos a classe 5 - ELEMENTOS DE TEXTO EM LINHA
01-<a>
O nome desta tag tem Âncora mas tem uma tag com nome semelhante, Link que faz muita confusão.
A tag link só é usada no header para incorporar ao código da página recursos de outras páginas como folhas
de estilo, bootstrap, javascript. Ela faz a
ligação do documento com outro ponto de interesse de maneira que com um clique você vá direto até ele.
Esta tag é uma das mais importantes da linguagem HTML. Ela permite que eu referencie um outro ponto deste
mesmo documento ( link interno a página ), referencie um outro documento ( link externo a página mas no
mesmo servidor ) ou mesmo uma página em um site da Internet ( link externo a página e ao site ).
Com isto podemos anexar documentos/sites explicativos ao assunto abordado, encaminhar o usuário diretamente
ao seu destino com um só clique do mouse e muitas outras utilidades envolvendo navegar para outro lugar com
extrema facilidade e simplicidade.
Importante : Os recursos de navegação estão intrinsicamente ligados aos recursos de infra-estrutura de rede.
Para mais detalhes leia o final do documento 1.
01.1-<a> - Link interno a mesma página
Muitas vezes estamos lendo um documento e ele faz referência a um anexo no final do documento.
Se este anexo é sem importância para o usuário ele passará batido pelo link. Mas se o anexo é de vital
importância para o usuário ele vai querer parar de ler o que esta lendo e ir para o anexo. É para isso
que existe o link, um clique e você tá lá.
Exemplo de link para a própria página :
O href do link aponta para o name de uma tag qualquer dentro da página.
Link : <a href="#linkInterno"> Teste de Link Interno</a>
Destino link: <a name="linkInterno">Este é o destino do linkInterno</a>
Testando o funcionamento do Link interno ( eu coloquei ele bem longe ):
Teste de Link interno
01.2-<a> - Link externo a página mas dentro do servidor
Este é o modelo mais clássico de uso desta tag. Estamos numa página e queremos navegar para outra
página dentro do nosso site.
Exemplo de link para uma página externa mas no mesmo servidor :
<a href="00-Sites de Referencia.html"> Teste de Link externo no mesmo servidor-Navegação para a página 00-Sites de Referencia.html</a>
01.3-<a> - Link externo a página e fora do nosso servidor
Este link é exatamente igual ao link para documento externo no mesmo site com a diferença que
será chamado um servidor externo que fará o uso do servidor DNS do micro que esta rodando
o browser. Estamos numa página e queremos navegar para outra página fora do nosso site.
Exemplo de link para uma página externa fora do nosso servidor :
<a href="https://www.google.com"> Teste de Link externo fora de nosso-Navegação para a google.com</a>
O Elemento HTML <abbr> (ou Elemento de Abreviação HTML) representa uma abreviação e opcionalmente
fornece uma descrição completa para ela.
Alguns navegadores, como o Internet Explorer, não aplicam nenhum estilo à mais do que é aplicado ao elemento
<span> Opera, Firefox, e alguns outros adicionam um sublinhado pontilhado ao conteúdo do elemento.
Alguns poucos navegadores não apenas adicionam um sublinhado pontilhado, mas também colocam o texto em
versalete (small caps); para evitar este tipo de estilo, adicione algo como font-variant: none no CSS que
administra este caso.
Exemplo de utilização:
Trump é presidente dos <abbr title="Estados Unidos da América">EUA</abbr>
Como o browser exibe :
Trump é presidente dos EUA
No Chrome ao passar o mouse sobre EUA ele vira uma interrogação e exibe o tooltip Estados Unidos da América.
03-<b>
É uma das tags mais antigas dos browsers e faz com que o texto que esteja envolvido por esta tag ficar em
negrito. B = Bold em ingles Negrito ( ou careca, ousado ).
Exemplo de utilização:
Este texto esta fora <b>Mas este texto esta dentro do negrito </b> e este esta fora também.
Como o browser exibe :
Este texto esta fora Mas este texto esta dentro do negrito e este esta fora também.
04-<br>
A tag br designa uma quebra de linha, seja onde for, texto, imagem. É irmão da tag p com a diferença
que a tag p é exibida em bloco e br é exibida em linha.
Exemplo de utilização:
Este esta antes da tag br <br /> mas este texto esta depois da tag br.
Como o browser exibe :
Este esta antes da tag br mas este texto esta depois da tag br.
05-<cite>
É uma abreviação para citação. O elemento HTML <cite> representa uma referência a um trabalho artístico.
Deve incluir o título do trabalho ou uma URL de referência, que pode ser em uma forma abreviada de acordo
com as convenções usadas para a adição dos metadados de citação.
No Chrome ele exibe o texto em itálico.
Exemplo de utilização:
Mais infirmações podem ser encontrada em <cite>[ISO-0000]</cite>.
Como o browser exibe :
Mais infirmações podem ser encontrada em [ISO-0000].
Use o atributo cite em um elemento <blockquote> ou <q> para referenciar um recurso online para
uma origem.
06-<code>
Indica que as informações contidas dentro da tag são códigos de computador. A tag <code> é uma tag de
frase. Ele define um pedaço de código de computador.
Dica: Essa tag não foi descontinuada, mas é possível obter um efeito mais rico com CSS.
Exemplo de utilização:
<code>Uma parte do código do programa</code>
Como o browser exibe : Uma parte do código do programa
No Chrome o texto foi exibido em rosa.
07-<data>
Os atributos data- * são usados para armazenar dados personalizados privados na página ou no aplicativo.
Os atributos data- * nos permitem incorporar atributos de dados personalizados em todos os elementos HTML.
Os dados armazenados (personalizados) podem ser usados no JavaScript da página para criar uma experiência
de usuário mais atraente (sem chamadas do Ajax ou consultas ao banco de dados do lado do servidor).
Os atributos data- * consistem em duas partes:
O nome do atributo não deve conter letras maiúsculas e deve ter pelo menos um caractere depois do prefixo "data-"
O valor do atributo pode ser qualquer sequência
Nota: Os atributos personalizados prefixados com "dados-" serão completamente ignorados pelo agente do usuário.
Exemplo de utilização:
<p data-*="valorx">Este é um parágrafo com valor associado</p>
Como o browser exibe :
Este é um parágrafo com valor associado
O browser exibe o parágrafo normalmente
08-<dfn>
O elemento dfn é uma definição de um termo.
Exemplo de utilização:
<p>
<dfn id="def-internet">A Internet</dfn> é um sistema global de redes interconectadas que usam o
Internet Protocol Suite (TCP/IP) para servir bilhões de usuários no mundo todo.
</p>
Como o browser exibe :
A Internet é um sistema global de redes interconectadas que usam o
Internet Protocol Suite (TCP/IP) para servir bilhões de usuários no mundo todo.
09-<em>
O elemento em significa enfase em Ingles. É utilizado para destacar um texto dos demais
É exibido normalmente como itálico mas não deve ser usado para este propósito.
Exemplo de utilização:
Este texto esta antes da tag em <em> mas este esta dentro</em> e este outro esta fora.
Como o browser exibe :
Este texto esta antes da tag em mas este esta dentro e este outro esta fora.
Como já disse neste documento, itálico é a enfase mais sutil que se pode dar a um texto e nem sempre
é notada pelo usuário.
10-<i>
É uma das tags mais antigas dos browsers e faz com que o texto que esteja envolvido por esta tag ficar em
itálico.
Exemplo de utilização:
Este texto esta fora <i>Mas este texto esta dentro do itálico </i> e este esta fora também.
Como o browser exibe :
Este texto esta fora Mas este texto esta dentro do itálico e este esta fora também.
Note que o efeito itálico da o menor destaque possível a um texto, quase imperceptível.
11-<kbd>
Esta tag define que o texto deve ser exibido como se fosse uma entrada do teclado.
Com o bootstrap o texto é exibido realmente como se fosse uma tecla do teclado
Exemplo de utilização:
<kbd>Entrada de teclado</kbd>
<kbd>A</kbd>
<kbd>S</kbd>
<kbd>D</kbd>
Como o browser exibe : Entrada de tecladoASD
Existe as seguintes tags para dar enfase ao texto:
Tag
Renderização
<em>
Renderiza como texto enfatizado
<strong>
Define texto importante
<code>
Define um código do computador
<samp>
Define a amostra de saída de um programa de computador
<kbd>
Define a entrada do teclado
<var>
Define uma variável
12-<mark>
Define um texto marcado.
Exemplo de utilização:
Este texto esta antes da tag mark <mark> mas este aqui esta dentro</mark< e este aqui tá fora.
Como o browser exibe :
Este texto esta antes da tag mark mas este aqui esta dentro e este aqui tá fora.
No Chrome o texto foi exibido normalmente mas com um fundo rosa bem claro, quase imperceptível.
13-<q>
A tag <q> define uma cotação curta. Os navegadores normalmente inserem aspas ao redor da cotação.
Exemplo de utilização:
Este texto esta antes da tag q <q> mas este aqui esta dentro</q> e este aqui tá fora.
Como o browser exibe :
Este texto esta antes da tag q mas este aqui esta dentro e este aqui tá fora.
14-<s>
A tag <s> especifica o texto que não é mais correto, preciso ou relevante.
A tag <s> não deve ser usada para definir texto substituído ou excluído.
Use a tag <del> para definir texto substituído ou excluído.
Exemplo de utilização:
Este texto esta antes da tag s <s> mas este aqui esta dentro</s> e este aqui tá fora.
Como o browser exibe :
Este texto esta antes da tag s mas este aqui esta dentro e este aqui tá fora.
15-<samp>
Ele define a saída de amostra de um programa de computador.
Exemplo de utilização:
Este texto esta antes da tag samp <samp> mas este aqui esta dentro</samp> e este aqui tá fora.
Como o browser exibe :
Este texto esta antes da tag samp mas este aqui esta dentro e este aqui tá fora.
No Chrome exibiu com a fonte courier monoespaçada.
16-<small>
Define que o texto em seu interior deve ser exibido menor que o corrente no documento atual.
Exemplo de utilização:
Este texto esta antes da tag small <small> mas este aqui esta dentro</small> e este aqui tá fora.
Como o browser exibe :
Este texto esta antes da tag small mas este aqui esta dentro e este aqui tá fora.
17-<span>
É uma das tags mais versateis do html pois permite definir uma região do documento sem afetar a disposição
dos elementos naturalmente feita pelo browser. Sua tag similar é a div que é exibida em bloco e por isso
altera o layout normal da página.
Muito útil para aplicar efeitos sem alterar o leioute natural do browser
Exemplo de utilização:
Este texto esta antes da tag span <span style="color:red;"> mas este texto esta dentro da tag span</span> e este texto esta depois da tag.
Como o browser exibe :
Este texto esta antes da tag span
mas este texto esta dentro da tag span e este texto esta depois da tag.
18-<strong>
Em muitos browsers esta tag é exatamente igual a tag b, ou seja, faz com que o texto que esteja envolvido
por esta tag ficar em negrito.
Exemplo de utilização:
Este texto esta fora <strong>Mas este texto esta dentro da tag strong </strong> e este esta fora também.
Como o browser exibe :
Este texto esta fora
Mas este texto esta dentro da tag strong e este esta fora também.
19-<sub>
É uma da pouco utilizada pois desloca o texto em relação a linha e sua utilização se resume a
sites científicos ou matemáticos. Faz com que o texto dentro de sua tag fique subescrito.
Exemplo de utilização:
h<sub>2</sub>O é a fórumula da água.
Como o browser exibe :
h2O é a fórumula da água.
20-<sup>
É uma da pouco utilizada pois desloca o texto em relação a linha e sua utilização se resume a
sites científicos ou matemáticos. Faz com que o texto dentro de sua tag fique superscrito.
Exemplo de utilização:
x<sup>2</sup> - 2ab + 4 = 0.
Como o browser exibe :
x
2 - 2ab + 4 = 0.
21-<time>
Define que o campo em seu interior é um horario no formato que nós humanos conhecemos.
O elemento HTML time (<time>) representa o tempo tanto no formato de 24 horas ou como uma data precisa no calendário Gregoriano
(com informações opcionais de tempo e fuso horário)
Este elemento é destinado a apresentar datas e horas no dispositivo em um formato legível. Isto pode ser útil aos
agentes do usuário em oferecer qualquer programação de eventos ao calendário do utilizador.
Exemplo de utilização:
Nós abrimos às todos os dias.
<time datetime="2008-02-14 20:00">Dias dos Namorados - 14/02/2008</time>
Como o browser exibe :
Nós abrimos às todos os dias.
Não entendi para que esta tag serve.Parece que para formatar data e horario mas não entendi direito.
22-<u>
É uma das tags mais antigas dos browsers e faz com que o texto que esteja envolvido por esta tag ficar em
sublinhado.
Exemplo de utilização:
Este texto esta fora <i>Mas este texto esta dentro do sublinhado </i> e este esta fora também.
Como o browser exibe :
Este texto esta foraMas este texto esta dentro do sublinhado e este esta fora também.
23<var>
O elemento HTML Variable (<var> ) representa uma variável em uma expressão matemática ou um contexto de
programação.
Exemplo de utilização:
Este texto esta fora da tag var <var>Mas este texto esta dentro do tag var </var> e este esta fora também.
Como o browser exibe :
Este texto esta fora da tag var Mas este texto esta dentro do tag var e este esta fora também.